// Tabstrip Framework // This file implements a Tabbed-navigation bar framework // You can Construct a Tabstrip as demonstrated in // navigation.html // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! // NOTE: YOU SHOULD NEVER NEED TO EDIT THIS FILE /////////////////////////////////////////////////////////////////////////////// // Class PreloadedImage /////////////////////////////////////////////////////////////////////////////// // Member functions: // PreloadedImage(url); // constructor // OnLoad(); // called when image is preloaded // Useful (public) member variables: // pImage // pointer to an Image object used to preload // src // the url for the image loaded /////////////////////////////////////////////////////////////////////////////// // Construct a preloaded image, given the URL. // The callback is called when the image is loaded function PreloadedImage(url) { if(PreloadedImage.arguments.length == 0) return; this.pImage = new Image(); this.loaded = true; this.pImage.onload = this.OnLoad; this.pImage.src = url; this.src = url; } // Called when one of the tab's images is loaded // when all are loaded, the tab is considered "loaded" function PreloadedImage_OnLoad() { this.loaded = true; } // PreloadedImage prototypes new PreloadedImage(); PreloadedImage.prototype.OnLoad = PreloadedImage_OnLoad; //-mch I don't know how to make real constants in JS, so ... var TS_NORMAL = 0; // normal tab sate var TS_ROLLOVER = 1; // mouse is over tab var TS_SELECTED = 2; // tab is selected Tab.Selectable = 0; Tab.Doit = 1; /////////////////////////////////////////////////////////////////////////////// // Class Tab /////////////////////////////////////////////////////////////////////////////// // Member functions: // Tab(ImageName, // Constructor // NormalURL, // RolloverURL, // SelectedURL, // TabStyle); // Load(); // pre-load all images now // NormalImage(); // switch tab to the normal state // SelectedImage(); // switch tab to the selected state // RolloverImage(); // switch tab to the rollover state // Useful (public) member variables: // loaded // are all tab images fully pre-loaded? // src // the url for the image loaded /////////////////////////////////////////////////////////////////////////////// // to check if the tab is fully loaded function Tab_CheckLoaded() { if(!docLoaded) return; if(this.pRolloverImage.loaded && this.pNormalImage.loaded && this.pSelectedImage.loaded) { this.loaded = true; this.pDocImage = document.images[this.imageName]; if(!this.pDocImage) alert("invalid image: " + this.imageName); } } // to change the image that the tab displays function Tab_ChangeImage(pImage) { if(!this.loaded) { // no dynamics until loaded this.CheckLoaded(); if(!this.loaded) return; } if(!this.pDocImage) return; this.pDocImage.src = pImage.src; } // to show the tab's normal image function Tab_NormalImage() { this.state = TS_NORMAL; this.ChangeImage(this.pNormalImage); } // to show the tab's selected image (the tab is selected) function Tab_SelectedImage() { this.state = TS_SELECTED; this.ChangeImage(this.pSelectedImage); } // to show the tab's rollover image function Tab_RolloverImage() { this.state = TS_ROLLOVER; this.ChangeImage(this.pRolloverImage); } // Tells whether this tab can be selected, or if it is just a "do-it" (eg print) function Tab_CanSelect() { return (this.style == Tab.Selectable); } // tell the tab to preload it's images function Tab_Load() { this.pNormalImage = new PreloadedImage(this.normalURL); this.pRolloverImage = new PreloadedImage(this.rolloverURL); this.pSelectedImage = new PreloadedImage(this.selectedURL); } // Construct a new Tab function Tab(ImageName, NormalURL, RolloverURL, SelectedURL, TabStyle) { this.imageName = ImageName; this.loaded = false; this.state = TS_NORMAL; this.selectedURL = SelectedURL; this.normalURL = NormalURL; this.rolloverURL = RolloverURL; this.style = TabStyle; } // tab prototypes new Tab(0,0,0,0); Tab.prototype.ChangeImage = Tab_ChangeImage; Tab.prototype.NormalImage = Tab_NormalImage; Tab.prototype.RolloverImage = Tab_RolloverImage; Tab.prototype.SelectedImage = Tab_SelectedImage; Tab.prototype.Load = Tab_Load; Tab.prototype.CheckLoaded = Tab_CheckLoaded; Tab.prototype.CanSelect = Tab_CanSelect; /////////////////////////////////////////////////////////////////////////////// // Class TabStrip /////////////////////////////////////////////////////////////////////////////// // Member functions: // TabStrip(Tabs...); // Constructor // SelectedTab(); // return the name of the document image for // // the currently selected tab // MouseOver(tabname); // Process a mouseover event at the given tabname // MouseClick(tabname);// Process a mouseclick event at the given tabname // MouseOut(tabname); // Process a mouseout event at the given tabname // // Useful (public) member variables: // (none) /////////////////////////////////////////////////////////////////////////////// // the TabStrip Constructor // This function takes an arbitrarily large list of // Tab objects, and handles the state dynamics of this // group as if it were a tab-strip. (eg the nav-bar) function TabStrip() { var args = TabStrip.arguments; if(args.length == 0 ) return; var arg; var i; var pImage; var imgName; this.TabArray = new Object(); for(i=0; i < args.length; i++) { imgName = args[i].imageName; if(i ==0) this.activeTab = imgName; this.TabArray[imgName] = args[i]; this.TabArray[imgName].Load(); } } // returns the currently selected tab in the strip function TabStrip_SelectedTab() { return this.activeTab; } // processes a mouse over event for a particular tab function TabStrip_MouseOver(tabname) { if(!this.TabArray[tabname]) return; // if tab isn't selected, highlight (rollover) it if (this.SelectedTab() != tabname) { this.TabArray[tabname].RolloverImage(); } } // processes a mouse out event for a particular tab function TabStrip_MouseOut(tabname) { var pTab; // if the tab isn't selected return from rollover to normal if (this.SelectedTab() != tabname) { pTab = this.TabArray[tabname]; if(pTab) pTab.NormalImage(); } } // processes a mouse click event for a particular tab function TabStrip_MouseClick(tabname) { var OldTab = this.TabArray[this.SelectedTab()]; var NewTab = this.TabArray[tabname]; if(! (OldTab && NewTab)) return; if(NewTab.CanSelect() ) { // select new tab this.activeTab = tabname; OldTab.NormalImage(); NewTab.SelectedImage(); } else { // just return the "do-it" tab to normal after the click NewTab.NormalImage(); } } // TabStrip prototypes new TabStrip(); TabStrip.prototype.MouseClick = TabStrip_MouseClick; TabStrip.prototype.MouseOver = TabStrip_MouseOver; TabStrip.prototype.MouseOut = TabStrip_MouseOut; TabStrip.prototype.SelectedTab = TabStrip_SelectedTab;